<template>
  <div
    class="decorate-store"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'"
  >
    <div class="store-layout">
      <div class="stores-name">
        <i></i>
        <span>{{tplItemData.title}}</span>
        <i></i>
      </div>
      <ul v-if="near_store.length>0">
				<li class="store-item" v-for="(row,index) in near_store" :key="index">
          <a
            class="store-item-link">
            <div class="store-flex" @click="openLink(row.link)">
              <div class="store-logo">
                <span class="logo-box">
                  <img :src="row.imgdir || errorImg" alt />
                </span>
              </div>
              <div class="store-info">
                <p class="store-name ell" v-if="row.shop_name">{{row.shop_name}}</p>
                <p class="store-addr city_area">{{row.province_city_area}}</p>
                <p class="store-addr">{{row.address}}</p>
              </div>
            </div>
						<div class="store-cell">
              <div class="btn" @click="openLink(row.link)">
                <span>
                  <span>进店</span><img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/store_next1.png" alt="">
                </span>
              </div>
							<!-- <span>进店<img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/store_next.png" alt="" width="8"></span> -->
							<p class="distance" @click="openLink(row.link)">距您{{ row.distance }} km</p>
              <div class="store-icon">
                <img @click="handleClickCheckMap(row)" src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/map.png" alt="">
                <!-- TODO 微分销与小程序差别：拨打电话 -->
                <a @click="wxPhoneCall(row.mobile)" v-if="tplItemData.storeHideMobile!=1"><img src="https://img.wifenxiao.com/h5-wfx/images/shop/storeList/phone.png" alt=""></a>
              </div>
						</div>
          
					</a>

          <!-- <div class="store-btn">
            <div class="btn-item">
              <a
                href="javascript:void(0);"
                class="icon_location_link link1"
                @click="handleClickCheckMap(row)"
              >查看地图</a>
            </div>
            <div class="btn-item" v-if="tplItemData.storeHideMobile!=1">
              
              <a
                href="javascript:;"
                v-if="sid!=8008318"
                class="link2"
                @click="wxPhoneCall(row.mobile)"
              >联系服务顾问</a>
              <a v-else-if="sid != 8008318" :href="'tel:'+row.mobile" class="link2">联系服务顾问</a>
            </div>
          </div> -->
        </li>
      </ul>
      <div class="all-stores" @click="JumpName('storeList')">
        查看全部店铺
        <i></i>
      </div>
    </div>
    <a-map ref="aMaps" @getLatLng="onGetLatLng" :showLoading="true"/>
  </div>
</template>

<script>
import { openPage } from "@/utils/utils";
// import { isAPP } from "@/utils/validate";
import Storage from "@/utils/store.js";
import aMap from '@/views/shop/storeList/components/amap'
import { nearStoreList } from '@/api/shop'
import Vue from "vue";
import small from '@/smallapp/small'

export default Vue.extend({
  name: "index",
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    aMap
  },
  data() {
    return {
      errorImg:'https://img.wifenxiao.com/h5-wfx/images/public/imgError.jpg',
      sid: "",
      postData: {
        id: '',
        supplier_id: '',
        shop_name: '',
        cid: '',
        p: 1,
        group_id: 'no_group_id',
        latitude: '',
        longitude: ''
      },
      near_store: []
    };
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        const group_id = this.$route.query.group_id
        const cid = this.$route.query.cid
        const supplier_id = this.$route.query.id
        this.postData.group_id = group_id
        this.postData.cid = cid
        if ((Storage.fetchLocal('isShowSelfStore') && Storage.fetchLocal('isShowSelfStore') == 1)) {
          this.postData.supplier_id = supplier_id
        }
        this.postData.p = 1
        this.nearStoreListFn(this.postData)
      }
    }
  },
  created() {
    // 刚开始默认展示数据
    this.near_store = this.tplItemData.near_store
    // console.log(this.near_store, 'near_store')
    //  供应商店铺添加只展示自己门店功能
    if (this.tplItemData.isShowSelfStore) {
      Storage.saveLocal('isShowSelfStore', this.tplItemData.isShowSelfStore)
    }
    this.sid = Storage.fetchLocal('sid')
  },
  mounted() {
    const group_id = this.$route.query.group_id
    const cid = this.$route.query.cid
    const supplier_id = this.$route.query.id
    if (group_id) {
      this.postData.group_id = group_id
    }
    if (cid) {
      this.postData.cid = cid
    }
    if ((Storage.fetchLocal('isShowSelfStore') && Storage.fetchLocal('isShowSelfStore') == 1) && supplier_id) {
      this.postData.supplier_id = supplier_id
    }
  },
  methods: {
    onGetLatLng(val) {
      this.postData.latitude = val.lat
      this.postData.longitude = val.lng
      this.nearStoreListFn(this.postData)
    },
    // 获取附近商家数据
    nearStoreListFn(data) {
      const postData = Object.assign({}, data, true)
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      nearStoreList(postData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.near_store = res.data.list
        }
      })
    },
    openLink(link) {
      openPage(link);
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data);
    },
    // 点击查看地图
    handleClickCheckMap(item) {
      // console.log(item);
      // TODO 微分销与小程序差别：查看地图
        wx.openLocation({
          latitude: parseFloat(item.latitude),
          longitude: parseFloat(item.longitude),
          name: item.shop_name,
          address: item.address,
          scale: 14
        })
    },
    // TODO 微分销与小程序差别：拨打电话
    wxPhoneCall(phone) {
      wx.makePhoneCall({
        phoneNumber: phone // 仅为示例，并非真实的电话号码
      });
    },
    locationLink(item, type) {
      let url = "";
      if (type == 1) {
        url =
          "https://m.amap.com/navi/?dest=" +
          item.longitude +
          "," +
          item.latitude +
          "&destName=" +
          item.shop_name +
          "&addr=" +
          item.address +
          "&key=552f0986c98fa36d395d95d52f3e9706";
      } else if (type == 2) {
        url =
          "https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:" +
          item.latitude +
          "," +
          item.longitude +
          ";title:" +
          item.shop_name +
          ";addr:" +
          item.address +
          "&key="+small.wxCache('tencentMapKey')+"&referer=storelocation";
      }
      location.href = url;
    }
  }
});
</script>

<style lang="scss">
@import 'src/styles/mixin';
.store-layout {
  .stores-name{
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    margin-bottom: 16px;
		span{
      padding: 0 20px;
      display: inline-block;
      position: relative;
      padding: 0 24px;
      // background: #fff;
      z-index: 1;
      color:#666;
		}
		i{
			// position: absolute;
			// top:50%;
			// left:50%;
			// transform: translate(-50%,-50%);
			z-index: 0;
			width: 80px;
			border-top:2px solid #E5E6EB;
		}
	}
  ul {
    .store-item {
      position: relative;
			background: #fff;
			width: 100%;
			// min-height: 132px;
      margin-bottom: 16px;
      border-radius: 12px;
			.store-item-link{
				padding: 24px;
				color: #333;
        height: 176px;
				display: flex;
        align-items: center;
        justify-content: space-between;
        .store-flex {
          display: flex;
        }
				.store-logo {
					.logo-box {
						width: 80px;
						height: 80px;
						background-size: contain;
						border-radius: 8px;
						overflow: hidden;
						display: inline-block;
            margin-right: 16px;
						img {
							width: 100%;
						}
					}
				}
				.store-info{
          flex:1;
          max-width: 400px;
					.store-name{
            font-size: 28px;
            font-weight: bold;
						color: #333;
						padding-bottom: 12px;
            @include showEllipsis;
					}
					.store-addr{
            // font-size: 22px;
						color: #666;
            @include lineClamp(22px, 1.4, 2);
            &.city_area {
              margin-bottom:8px
            }
					}
				}
				.store-cell{
					text-align: right;
          margin-top: 8px;
          border-left: 1px solid #F2F3F5;
          padding-left: 24px;
					.btn{
            width: 110px;
            text-align: center;
            color: #FF2A40;
            border: 2px solid #FF2A40;
            border-radius: 50px;
            // padding-top: 6px;
            font-size: 24px;
            margin: auto;
            // height: 42px;
            padding-bottom: 2px;
            span{
              // @include alignTop;
              line-height: 24px;
              font-size: 24px;
              height: 24px;
              position: relative;

              .icon{
                height: 26px;
                width: 26px;
                margin-left: 4px;
                position: relative;
                top: 5px
              }
            }
          }
          .distance{
            color: #666;
            padding-top: 10px;
            font-size: 20px;
          }
				}
			}
      .store-icon {
        text-align: center;
        margin-top: 16px;
        img {
          width: 40px;
          height: 40px;
        }
        a {
          margin-left: 16px;
        }
      }
      .store-btn {
        height: 80px;
        line-height: 80px;
        display: inline-flex;
        width: 100%;
        font-size: 28px;
        border-top: 2px solid #ededed;
        display: flex;
        .btn-item {
          flex: 1;
          text-align: center;
          border-right: 2px solid #ededed;
          &:last-child {
            border-right: none;
          }
          a {
            display: inline-block;
            color: #666;
            line-height: 80px;
          }
        }
      }
    }
  }
  .all-stores {
    width: 100%;
    text-align: center;
    font-size: 28px;
    position: relative;
    background: #fff;
    border-radius: 20px;
    margin-top: 20px;
    line-height: 92px;
    color: #666;
    i {
      background: url(https://img.wifenxiao.com/h5-wfx/images/diy/51right_logo.png)
        no-repeat;
      width: 18px;
      height: 20px;
      display: inline-block;
      background-size: 100%;
      margin-left: 10px;
    }
  }
}
</style>
